@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes slide-from-right {
  from {
    transform: translateX(30px);
  }
}

@keyframes slide-to-left {
  to {
    transform: translateX(-30px);
  }
}

::view-transition-old(page-title) {
  animation:
    fade-out 0.5s ease-in-out forwards,
    slide-to-left 0.5s ease-in-out forwards;
}

::view-transition-new(page-title) {
  animation:
    fade-in 0.5s ease-in-out forwards,
    slide-from-right 0.5s ease-in-out forwards;
}

::view-transition-old(page-content) {
  animation: fade-out 0.5s ease-in-out forwards;
}

::view-transition-new(page-content) {
  animation: fade-in 0.5s ease-in-out forwards;
}
